<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="nav-back" @click="goBack">
                <text class="iconfont icon-back"></text>
            </view>
            <view class="nav-title">发布公告</view>
            <view class="nav-right" @click="publishNotice">
                <text>发布</text>
            </view>
        </view>
        
        <!-- 表单区域 -->
        <view class="form-container">
            <!-- 公告标题 -->
            <view class="form-item">
                <view class="form-label">公告标题</view>
                <input 
                    type="text" 
                    class="form-input" 
                    placeholder="请输入公告标题" 
                    v-model="noticeForm.title"
                />
            </view>
            
            <!-- 公告类型 -->
            <view class="form-item">
                <view class="form-label">公告类型</view>
                <view class="type-selector">
                    <view 
                        class="type-item" 
                        :class="noticeForm.type === 1 ? 'type-selected' : ''"
                        @click="selectType(1)"
                    >
                        重要通知
                    </view>
                    <view 
                        class="type-item" 
                        :class="noticeForm.type === 2 ? 'type-selected' : ''"
                        @click="selectType(2)"
                    >
                        活动公告
                    </view>
                    <view 
                        class="type-item" 
                        :class="noticeForm.type === 3 ? 'type-selected' : ''"
                        @click="selectType(3)"
                    >
                        系统通知
                    </view>
                </view>
            </view>
            
            <!-- 公告内容 -->
            <view class="form-item">
                <view class="form-label">公告内容</view>
                <textarea 
                    class="form-textarea" 
                    placeholder="请输入公告内容" 
                    v-model="noticeForm.content"
                    auto-height
                    @input="onContentInput"
                ></textarea>
                <view class="word-count">
                    {{ noticeForm.content.length }}/2000
                </view>
            </view>
            
            <!-- 附件上传 -->
            <view class="form-item">
                <view class="form-label">附件上传</view>
                <view class="upload-area">
                    <view class="upload-btn" @click="selectFile">
                        <text class="iconfont icon-upload"></text>
                        <text>上传附件</text>
                    </view>
                    
                    <!-- 已上传文件列表 -->
                    <view class="uploaded-files" v-if="uploadedFiles.length > 0">
                        <view class="uploaded-file" v-for="(file, index) in uploadedFiles" :key="index">
                            <text class="iconfont icon-file"></text>
                            <text class="file-name">{{ file.name }}</text>
                            <text class="iconfont icon-delete" @click="removeFile(index)"></text>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 发布范围 -->
            <view class="form-item">
                <view class="form-label">发布范围</view>
                <view class="range-selector">
                    <view class="range-item">
                        <checkbox-group v-model="noticeForm.scope">
                            <label class="checkbox">
                                <checkbox value="all" />全部用户
                            </label>
                            <label class="checkbox">
                                <checkbox value="vip" />VIP用户
                            </label>
                            <label class="checkbox">
                                <checkbox value="new" />新注册用户
                            </label>
                        </checkbox-group>
                    </view>
                </view>
            </view>
            
            <!-- 发布时间 -->
            <view class="form-item">
                <view class="form-label">发布时间</view>
                <view class="date-selector">
                    <picker mode="date" @change="onDateChange" :value="noticeForm.publishDate">
                        <view class="picker">
                            {{ noticeForm.publishDate || '请选择发布日期' }}
                            <text class="iconfont icon-arrow-right"></text>
                        </view>
                    </picker>
                    
                    <picker mode="time" @change="onTimeChange" :value="noticeForm.publishTime">
                        <view class="picker">
                            {{ noticeForm.publishTime || '请选择发布时间' }}
                            <text class="iconfont icon-arrow-right"></text>
                        </view>
                    </picker>
                </view>
            </view>
        </view>
        
        <!-- 预览模态框 -->
        <view class="modal-mask" v-if="showPreview" @click="closePreview">
            <view class="modal-container">
                <view class="modal-header">
                    <view class="modal-title">公告预览</view>
                    <view class="modal-close" @click="closePreview">
                        <text class="iconfont icon-close"></text>
                    </view>
                </view>
                <view class="modal-content">
                    <!-- 预览内容 -->
                    <view class="preview-content">
                        <view class="preview-title">{{ noticeForm.title }}</view>
                        <view class="preview-info">
                            <text class="preview-type" :class="getTypeClass(noticeForm.type)">
                                {{ getTypeName(noticeForm.type) }}
                            </text>
                            <text class="preview-time">
                                {{ noticeForm.publishDate }} {{ noticeForm.publishTime }}
                            </text>
                        </view>
                        <view class="preview-divider"></view>
                        <view class="preview-body" v-html="formatContent(noticeForm.content)"></view>
                        
                        <!-- 预览附件 -->
                        <view class="preview-attachments" v-if="uploadedFiles.length > 0">
                            <view class="preview-attach-title">附件：</view>
                            <view class="preview-attach-item" v-for="(file, index) in uploadedFiles" :key="index">
                                <text class="iconfont icon-file"></text>
                                <text class="preview-attach-name">{{ file.name }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="modal-footer">
                    <button class="btn-cancel" @click="closePreview">取消</button>
                    <button class="btn-confirm" @click="confirmPublish">确认发布</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            noticeForm: {
                title: '',
                type: 1, // 1:重要通知 2:活动公告 3:系统通知
                content: '',
                publishDate: '',
                publishTime: '',
                scope: ['all'],
                isTop: false
            },
            uploadedFiles: [],
            showPreview: false
        }
    },
    onLoad() {
        // 获取当前日期和时间
        const date = new Date();
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        
        this.noticeForm.publishDate = `${year}-${month}-${day}`;
        this.noticeForm.publishTime = `${hours}:${minutes}`;
    },
    methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack();
        },
        
        // 选择公告类型
        selectType(type) {
            this.noticeForm.type = type;
        },
        
        // 监听内容输入
        onContentInput(e) {
            // 限制最大长度
            if (e.detail.value.length > 2000) {
                this.noticeForm.content = e.detail.value.substring(0, 2000);
                uni.showToast({
                    title: '内容不能超过2000字',
                    icon: 'none'
                });
            } else {
                this.noticeForm.content = e.detail.value;
            }
        },
        
        // 选择文件上传
        selectFile() {
            uni.chooseMessageFile({
                count: 3, // 最多选择3个文件
                type: 'file',
                success: (res) => {
                    const tempFiles = res.tempFiles;
                    tempFiles.forEach(file => {
                        // 处理文件大小显示
                        let sizeText = '';
                        if (file.size < 1024) {
                            sizeText = file.size + 'B';
                        } else if (file.size < 1024 * 1024) {
                            sizeText = (file.size / 1024).toFixed(2) + 'KB';
                        } else {
                            sizeText = (file.size / (1024 * 1024)).toFixed(2) + 'MB';
                        }
                        
                        this.uploadedFiles.push({
                            name: file.name,
                            size: sizeText,
                            path: file.path
                        });
                    });
                    
                    uni.showToast({
                        title: '文件已选择',
                        icon: 'success'
                    });
                }
            });
        },
        
        // 移除已上传文件
        removeFile(index) {
            this.uploadedFiles.splice(index, 1);
        },
        
        // 日期选择
        onDateChange(e) {
            this.noticeForm.publishDate = e.detail.value;
        },
        
        // 时间选择
        onTimeChange(e) {
            this.noticeForm.publishTime = e.detail.value;
        },
        
        // 发布公告
        publishNotice() {
            // 表单验证
            if (!this.noticeForm.title) {
                uni.showToast({
                    title: '请输入公告标题',
                    icon: 'none'
                });
                return;
            }
            
            if (!this.noticeForm.content) {
                uni.showToast({
                    title: '请输入公告内容',
                    icon: 'none'
                });
                return;
            }
            
            // 显示预览
            this.showPreview = true;
        },
        
        // 关闭预览
        closePreview() {
            this.showPreview = false;
        },
        
        // 确认发布
        confirmPublish() {
            // 模拟发布请求
            uni.showLoading({
                title: '发布中...',
                mask: true
            });
            
            setTimeout(() => {
                uni.hideLoading();
                uni.showToast({
                    title: '发布成功',
                    icon: 'success'
                });
                
                // 延迟返回上一页
                setTimeout(() => {
                    uni.navigateBack();
                }, 1500);
            }, 1000);
        },
        
        // 获取类型名称
        getTypeName(type) {
            const types = ['重要通知', '活动公告', '系统通知'];
            return types[type - 1];
        },
        
        // 获取类型样式类
        getTypeClass(type) {
            const classes = ['type-important', 'type-activity', 'type-system'];
            return classes[type - 1];
        },
        
        // 格式化内容为HTML
        formatContent(content) {
            // 将换行符转换为<br>标签
            return content.replace(/\n/g, '<br>');
        }
    }
}
</script>

<style>
.container {
    background-color: #F8F8F8;
    min-height: 100vh;
}

/* 导航栏样式 */
.nav-bar {
    height: 44px;
    background-color: #007AFF;
    display: flex;
    align-items: center;
    position: relative;
}

.nav-back {
    position: absolute;
    left: 15px;
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-back .iconfont {
    color: #FFFFFF;
    font-size: 18px;
}

.nav-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    margin: 0 auto;
}

.nav-right {
    position: absolute;
    right: 15px;
    color: #FFFFFF;
    font-size: 16px;
}

/* 表单样式 */
.form-container {
    background-color: #FFFFFF;
    margin-top: 10px;
}

.form-item {
    padding: 15px;
    border-bottom: 1px solid #EEEEEE;
}

.form-label {
    font-size: 15px;
    color: #333333;
    margin-bottom: 10px;
    font-weight: 500;
}

.form-input {
    font-size: 16px;
    color: #333333;
    height: 40px;
    line-height: 40px;
}

/* 公告类型选择器 */
.type-selector {
    display: flex;
    justify-content: space-between;
}

.type-item {
    width: 30%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #EEEEEE;
    font-size: 14px;
    color: #666666;
}

.type-selected {
    border: 1px solid #007AFF;
    background-color: #E8F3FF;
    color: #007AFF;
}

/* 文本域样式 */
.form-textarea {
    font-size: 16px;
    color: #333333;
    min-height: 150px;
}

.word-count {
    text-align: right;
    font-size: 13px;
    color: #999999;
    margin-top: 5px;
}

/* 附件上传区域 */
.upload-area {
    display: flex;
    flex-direction: column;
}

.upload-btn {
    width: 100px;
    height: 100px;
    background-color: #F5F5F5;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999999;
    font-size: 14px;
}

.upload-btn .iconfont {
    font-size: 24px;
    margin-bottom: 5px;
}

.uploaded-files {
    margin-top: 15px;
}

.uploaded-file {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #EEEEEE;
}

.uploaded-file .iconfont {
    color: #409EFF;
    font-size: 18px;
    margin-right: 8px;
}

.file-name {
    flex: 1;
    font-size: 15px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploaded-file .icon-delete {
    color: #999999;
    font-size: 16px;
}

/* 发布范围选择器 */
.range-selector .range-item {
    display: flex;
    flex-wrap: wrap;
}

.range-selector .checkbox {
    margin-right: 20px;
    margin-bottom: 10px;
}

.range-selector .checkbox text {
    font-size: 15px;
    color: #333333;
}

/* 日期选择器 */
.date-selector {
    display: flex;
}

.date-selector .picker {
    flex: 1;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.date-selector .picker:first-child {
    margin-right: 15px;
}

.date-selector .picker .icon-arrow-right {
    color: #999999;
}

/* 预览模态框 */
.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal-container {
    width: 90%;
    max-height: 80%;
    background-color: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid #EEEEEE;
    position: relative;
}

.modal-title {
    font-size: 18px;
    color: #333333;
    font-weight: 500;
    margin: 0 auto;
}

.modal-close {
    position: absolute;
    right: 15px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close .iconfont {
    color: #999999;
    font-size: 16px;
}

.modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.preview-content {
    background-color: #FFFFFF;
}

.preview-title {
    font-size: 18px;
    color: #333333;
    font-weight: 500;
    margin-bottom: 10px;
}

.preview-info {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #999999;
    margin-bottom: 10px;
}

.preview-type {
    padding: 0 5px;
    height: 18px;
    line-height: 18px;
    border-radius: 3px;
    margin-right: 10px;
    font-size: 12px;
}

.preview-divider {
    height: 1px;
    background-color: #eeeeee;
    margin: 10px 0;
}

.preview-body {
    font-size: 16px;
    color: #333333;
    line-height: 1.8;
}

.preview-attachments {
    margin-top: 20px;
}

.preview-attach-title {
    font-size: 15px;
    color: #333333;
    font-weight: 500;
    margin-bottom: 10px;
}

.preview-attach-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
}

.preview-attach-item .iconfont {
    color: #409EFF;
    font-size: 18px;
    margin-right: 8px;
}

.preview-attach-name {
    font-size: 15px;
    color: #333333;
}

.modal-footer {
    display: flex;
    height: 50px;
    border-top: 1px solid #EEEEEE;
}

.btn-cancel, .btn-confirm {
    flex: 1;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
}

.btn-cancel {
    color: #666666;
}

.btn-confirm {
    color: #007AFF;
    font-weight: 500;
}
</style>
    